gulp

What is gulp?

Gulp is a toolkit that helps developers automate and enhance workflows. It is a streaming build system that allows the use of Node streams to read files from the filesystem, transform them, and output them back to the filesystem or elsewhere. Gulp is commonly used for tasks such as minification, concatenation, cache busting, unit testing, linting, and optimization.

What are gulp's main functionalities?

Task Automation

Automate repetitive tasks with custom defined tasks.

const gulp = require('gulp');
gulp.task('default', function() {
  // Your task code here
});

File Minification

Minify JavaScript files to reduce their size for production.

const gulp = require('gulp');
const uglify = require('gulp-uglify');
gulp.task('minify-js', function() {
  return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

File Concatenation

Concatenate multiple files into a single file.

const gulp = require('gulp');
const concat = require('gulp-concat');
gulp.task('concat-js', function() {
  return gulp.src('src/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist'));
});

Sass Compilation

Compile Sass files into CSS.

const gulp = require('gulp');
const sass = require('gulp-sass');
gulp.task('sass', function() {
  return gulp.src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

Live Reloading

Automatically reload the browser when files are modified.

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
gulp.task('serve', function() {
  browserSync.init({
    server: './dist'
  });
  gulp.watch('src/*.html').on('change', browserSync.reload);
});

Other packages similar to gulp

webpack

Webpack is a powerful module bundler that can also run many of the same tasks as Gulp, but it focuses more on bundling JavaScript modules together. It has a different plugin system and uses a configuration file for defining the build steps.

grunt

Grunt is another task runner like Gulp, but it uses a configuration-over-code approach. It has a large plugin ecosystem and is configured in a declarative manner, which can be more verbose than Gulp's code-based task definitions.

rollup

Rollup is a module bundler for JavaScript which uses the new standardized format for code modules included in the ES6 revision of JavaScript. It is similar to Webpack but is known for producing smaller bundles.

parcel

Parcel is a web application bundler that offers a zero-configuration setup. It aims to provide out-of-the-box support for many development tasks without the need for additional plugins or configurations, unlike Gulp which requires setting up tasks and plugins.

broccoli

Broccoli is a fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions. Similar to Gulp, it uses a plugin architecture but focuses on providing the fastest rebuilds and simplicity in build configurations.

README

The streaming build system

What is gulp?

• Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
• Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
• Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformations
• Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use

Documentation

For a Getting started guide, API docs, recipes, making a plugin, etc. check out or docs!

• Need something reliable? Check out the documentation for the current release!
• Want to help us test the latest and greatest? Check out the documentation for the next release!

Sample gulpfile.js

This file will give you a taste of what gulp does.

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use any package available on npm
gulp.task('clean', function() {
  // You can use multiple globbing patterns as you would with `gulp.src`
  return del(['build']);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

Incremental Builds

We recommend these plugins:

• gulp-changed - only pass through changed files
• gulp-cached - in-memory file cache, not for operation on sets of files
• gulp-remember - pairs nicely with gulp-cached
• gulp-newer - pass through newer source files only, supports many:1 source:dest

Want to contribute?

Anyone can help make this project better - check out our Contributing guide!